<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
    <title>启蒙优选-商品详情</title>
    <link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=07220" />
    <link rel="stylesheet" href="__TMPL__/home/public/assets/css/swiper.min.css">
  </head>
  <style>
    .copyUrlMask{width:100%;height:100%;position: fixed;left:0;top:0;z-index:100000;background:rgba(0,0,0,.5);display: none;}
    .copyUrlMask .copyUrlBox{width:12.5rem;height:13.95rem;background: #fff;padding:1.22rem .68rem;border-radius:.5rem;position: fixed;top:0;left:0;right:0;bottom:0;margin:auto;}
    .copyUrlMask .copyUrlBox .copyUrlText{background:#F5F5F5;border-radius: .5rem;padding:1.47rem .9rem;font-size:.54rem;color:#333;line-height: .95rem;height:8.6rem;overflow-y: auto;}
    .copyUrlMask .copyUrlBox .copyBtn{width:100%;height:1.8rem;border-radius: 1rem;overflow: hidden;color:#fff;font-size:.63rem;margin:1.2rem 0 0;}
    .copyUrlMask .copyUrlBox .copyBtn #copyAll{background:#383B4E;width:50%;height:100%;border:none;color:#fff;}
    .copyUrlMask .copyUrlBox .copyBtn #copyUrl{background:#F93670;width:50%;height:100%;border:none;color:#fff;}
    .copyUrlMask .copyUrlBox img.closeCopy{width:1rem;height:1rem;position:absolute;bottom:-1.4rem;left:50%;margin-left:-.5rem;}
  </style>
  <body>
    <!-- 商品详情 --> 
    <div class="goodIndex">
      <div class="content">
        <!-- <div class="order_top">
          <div class="title flex juscbtween">
            <a href="javascript:history.go(-1);" class="flex alitemCenter"><img src="__TMPL__/home/public/assets/img/back.png" alt=""></a>
            <b></b>
            <span></span>
          </div>
        </div> -->
        
        <!-- 商品详情 -->
        <div class="good_detial">
          <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                  <foreach name="$info.zt_logo" item="vo">
                    <a href="" class="swiper-slide"><img src="{$vo}" alt=""></a>
                  </foreach>
                  
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
          </div>
          <div class="good_info">
            <div class="price">
              <i>￥</i><b>{$info.sell_money}</b><span>￥{$info.original_money}</span>
            </div>
            <div class="type">
               <foreach name="$info.label" item="vo">
                   <span>{$vo.label}</span>
              </foreach>
            </div>
            <div class="good_title">{$info.title}</div>
          </div>
          <div class="good_highlights">
            <p><foreach name="$info.explain" item="vo">
              {$vo} <br>
            </foreach></p>
          </div>
          <!--<div class="good_profit flex juscbtween">
            <span>赚收益</span>
            <p>升级顾问，分享，自购再享收益<i>￥2.5</i></p>
            <img src="__TMPL__/home/public/assets/img/user/right.png" alt="">
          </div>
          <div class="good_integral flex juscbtween">
            <span>送积分</span>
            <p>购课可得<i>9.9</i>积分，点此兑换礼品</p>
            <img src="__TMPL__/home/public/assets/img/user/right.png" alt="">
          </div>-->

          <div class="good_check flex juscbtween" id="fixPara">
            <span class="on kechengjieshao" data-type="1">购课须知</span>
            <span class="goukexuzhi" data-type="2">课程介绍</span>
          </div>
          <!-- 购课须知 -->
          <div class="good_notice" id="good_notice">
            <div class="question">
              <div class="title">购课须知</div>
              <div class="question_item">
                {$info.buy_notice}
              </div>
              <!--<div class="question_item">
                <p>01 课程发货方式</p>
                <span>描述有效期有效期有效期有效期有效期有效期有效期有效期有效期有效期有效期有效期</span>
              </div>-->
            </div>
          </div>
          <!-- 课程介绍 -->
          <div class="good_introduce" id="good_introduce">
            <foreach name="$info.js_logo" item="vo">
                    <img src="{$vo}" alt="">
            </foreach>
          </div>
        </div>
        <!-- 底部购买栏 -->
        <div class="bottomBuy flex juscbtween">
          <a href="{:url('Index/index')}" class="left">
            <img src="__TMPL__/home/public/assets/img/foot/oneSelect.png" alt="">
            <p>首页</p>
          </a>
          <div class="isCanShare flex alitemCenter">
            <if condition="$info.grade gt 1">
              <button id="shareClassButton">分享给好友</button>
            </if>
            
            <button id="goBuyNow">立即购买</button>
          </div>
        </div>
      </div>

      <!-- 分享课程海报 -->
      <div class="inviteClassMask close">
        <div class="tipTextBox">
          <div class="inviteClassBox bubbling" id="inviteClassBox">
            <div class="inviteClassGood">
              <img src="" alt="" id="backgroundImg">
            </div>
            <div class="classGoodInfo">
              <div class="good_info">
                <h3><i>￥</i><span class="goodMoney"></span></h3>
                <p class="goodTitle"></p>
              </div>
              <p class="xuxian" style="font-size:.4rem;color:#d8d8d8">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </p>
              <div class="userInfo flex juscbtween">
                <div class="left flex alitemCenter">
                  <img src="" alt="" id="userHead">
                  <div class="info flex flexdirection">
                    <h3 class="userName"></h3>
                    <p>邀请您一起育儿育己~</p>
                  </div>
                </div>
                <div class="right">
                  <img src="" alt="" id="userCode">
                </div>
              </div>
            </div>
          </div>
          <div class="tipText">长按海报保存至手机</div>
        </div>
      </div>
      <div class="shareMaskGood close">
        <div class="shareBox flex juscbtween bubbling">
          <div class="shareitem gotoTuiguang">
            <img src="__TMPL__/home/public/assets/img/shareTuiguang.png" alt="">
            <p>推广奖励</p>
          </div>
          <div class="shareitem shareUrlButton">
            <img src="__TMPL__/home/public/assets/img/shareUrl.png" alt="">
            <p>分享链接</p>
          </div>
          <div class="shareitem copyUrlButton">
            <img src="__TMPL__/home/public/assets/img/copyUrl.png" alt="">
            <p>复制链接</p>
          </div>
          <div class="shareitem" id="inviteShareButton">
            <img src="__TMPL__/home/public/assets/img/shareDown.png" alt="">
            <p>生成海报</p>
          </div>
        </div>
      </div>
      <!-- 复制链接 -->
      <div class="copyUrlMask">
        <div class="copyUrlBox bubbling">
          <div class="copyUrlText" id="buyText">
            <p class="surlText"></p>
            <p>【秒杀价】￥<i class="surlPrice"></i></p>
            <p id="buyUrl">【购买链接】<i class="buyUrl"></i></p>
          </div>
          <div class="copyBtn flex">
            <button id="copyAll">复制全部</button>
            <button id="copyUrl">仅复制链接</button>
          </div>
          <img src="__TMPL__/home/public/assets/img/close.png" class="closeCopy" alt="">
        </div>
      </div>
      <!-- 引导分享 -->
      <div class="yindaoShareMask">
        <img src="__TMPL__/home/public/assets/img/yindaoShareImg.png" alt="">
      </div>
    </div>
  </body>
  <script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
  <script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  <script rel="stylesheet" src="__TMPL__/home/public/assets/js/swiper.min.js"></script>
  <script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
  <script rel="stylesheet" src="__TMPL__/home/public/assets/js/html2canvas.js?v=0724"></script>
  <script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  <script>
    $(function(){

      var goodId = {$info.id};
      //获取海报信息
      function getUserInfo(){
        $.ajax({
          url: '/fx/course_info',
          type: 'POST',
          data: {course_id:goodId},
        }).done(function(res) {
          if(res.code == 200){
            var data = res.data;
            headImg = data.logo;
            get_good_info(data);
            var beijinZt = 'data:image/png;base64,'+data.course_info.qm_zt_logo;
            $('#backgroundImg').attr('src',beijinZt);
            $('.goodMoney').html(data.course_info.sell_money)
            $('.goodTitle').html(characterLength(data.course_info.title,25));
            $('#userHead').attr('src',data.info.logo);
            // $('#inviteCode').html(data.info.invite);
            $('.userName').html(characterLength(data.info.nickname,4));
          }else{
                // layer.msg('获取好友信息失败！');
          }
        }).fail(function() {
          layer.msg('获取好友信息失败！');
        })
        $.ajax({
          url: '/fx/course_code',
          type: 'POST',
          data: {course_id:goodId},
        }).done(function(res) {
          if(res.code == 200){
            var data = 'data:image/png;base64,'+res.data;
            $('#userCode').attr('src',data);
          }else{
                // layer.msg('获取好友信息失败！');
          }
        }).fail(function() {
          layer.msg('获取好友信息失败！');
        })
      }

      //获取文案-短连接接口
      function getProduceSurl(good_id){
        $.ajax({
          url: '/produce_surl',
          type: 'POST',
          data: {course_id:good_id},
        }).done(function(res) {
          if(res.code == 200){
            $('.surlText').html(res.data.course_info.title);
            $('.surlPrice').html(res.data.course_info.sell_money);
            $('.buyUrl').html(res.data.short_url);
          }else{
                layer.msg('获取好友信息失败！');
          }
        }).fail(function() {
          layer.msg('获取好友信息失败！');
        })
      }
      $('.copyUrlButton').click(function(){
        getProduceSurl(goodId);
        $('.copyUrlMask').show();
      })
      //复制所有文案链接
      $('#copyAll').on('click', function () {
        var val = document.getElementById('buyText');
        window.getSelection().selectAllChildren(val);
        var copyCode = document.execCommand("Copy");

        if (copyCode) {
          layer.msg('复制成功');
        } else {
          layer.msg('复制失败');
        }
      });
      //仅复制链接
      $('#copyUrl').on('click', function () {
        var val = document.getElementById('buyUrl');
        window.getSelection().selectAllChildren(val);
        var copyCode = document.execCommand("Copy");

        if (copyCode) {
          layer.msg('复制成功');
        } else {
          layer.msg('复制失败');
        }
      });

      $('.closeCopy').click(function(){
        $('.copyUrlMask').hide();
      })
      getUserInfo();
      /**
     * 分享课程
     */
    function get_good_info(info) {
      $.ajax({
         url:'/home/wx/returnWechatMessage?sign=zzh_sign',
         type:'post',
         data:{
             "zz_url":window.location.href.split('#')[0]
         },
         success:function(_data){
              wx.config({
                  debug: false,
                  appId: _data.msg.appId, 
                  timestamp: _data.msg.timestamp, 
                  nonceStr: _data.msg.nonceStr, 
                  signature: _data.msg.signature,
                  jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQZone","onMenuShareQQ"] 
              });
              wx.ready(function () {

                var title=info.course_info.title;
                var desc='给你推荐一门好课';
                var link=window.location.href.split('#')[0]; // 分享链接，该链接必须在公众号JS安全域名之下，`http://abc.yeli.studio/another_page`也是可以的
                var imageUrl=info.course_info.tj_logo;
                    //分享到消息
                wx.onMenuShareAppMessage({
                   title: title,
                   desc: desc, 
                   link: link,
                   imgUrl: imageUrl,
                   type: '', // 分享类型,music、video或link，不填默认为link
                   dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                   success: function () {
                       //分享成功
                    },
                   cancel: function () {
                    // 取消分享
                    }
                })
                    //分享到朋友圈
                wx.onMenuShareTimeline({
                  title: title, // 分享标题
                  link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: imageUrl, // 分享图标
                  success: function () {
                    // 分享成功
                   },
                  cancel: function () {
                    // 取消分享
                   }
                })
              })
           }
        })
      }
      $('#shareClassButton').click(function(){
        $('.shareMaskGood').show();
      })
      $('#inviteShareButton').click(function(){
        $('.shareMaskGood').hide();
        // layer.msg('正在生成海报', {
        //   icon: 16,
        //   shade: .5
        // });
        // setTimeout(function(){
            $('.inviteClassMask').show();
            var shareContent = document.getElementById("inviteClassBox");
            html2canvas(shareContent,{useCORS:true,scrollY: 0,scrollX: 0}).then(function (canvas) {
              var dataURL =canvas.toDataURL("image/png");
              $("#inviteClassBox").html("<img src='"+dataURL+"' style='display:block; width:100%;height:100%' />");
            });
        // },1000)
      })

      // 字符长度限制
      function characterLength(v, n){
          if(v){
              const len = v.length;
              return len > n ? v.substr(0, n) + '...' : v
          }else{
              return v;
          }
      }


      //隐藏所有弹框
      $('.close').click(function(){
        $('.inviteClassMask').hide();
        $('.shareMaskGood').hide();

      })
      //隐藏引导分享
      $('.yindaoShareMask').click(function(){
        $('.yindaoShareMask').hide();
      });
      //显示引导分享
      $('.shareUrlButton').click(function(){
        $('.yindaoShareMask').show();
      })

      //冒泡，禁止点击
      $('.bubbling').click(function(){
        return false;
      })

      //轮播图
      var swiper = new Swiper('.swiper-container', {
          loop:true,
          pagination: {
            el: '.swiper-pagination'
          },
      });


      //点击切换课程介绍和须知
      $('.good_check span').click(function(){
        var type = $(this).attr('data-type');
        $(this).addClass('on').siblings().removeClass('on');
        if(type == 1){
          var position = $(".good_notice").offset();
          position.top = position.top-60;
          $("html,body").animate({scrollTop:position.top}, 100);
        }else{
          var position = $(".good_introduce").offset();
          position.top = position.top-60;
          $("html,body").animate({scrollTop:position.top}, 100);
        }
      })

      //滚动课程介绍tab固定
      var top = $("#fixPara").offset().top;
      var good_introduce = $("#good_introduce").offset().top;
      $(window).scroll(function() {
       var scrolls = $(this).scrollTop();
       if (scrolls > top) {
        $("#fixPara").addClass('goodTopTab');
       }else {
         $("#fixPara").removeClass('goodTopTab');
       }
       if (scrolls >= Number(good_introduce-100)) {
        $(".kechengjieshao").removeClass('on');
        $(".goukexuzhi").addClass('on');
       }else {
         $(".kechengjieshao").addClass('on');
         $(".goukexuzhi").removeClass('on');
       }
      });

      $('#goBuyNow').click(function(){
       
        location.href="./buy_course?course_id={$info.id}&invite_code={$invite}";
        
      });

      $('.gotoTuiguang').click(function(){
        location.href="/course_js?course_id={$info.id}"
      })

    })
  </script>
</html>
